<template>
  <div class="case-box">
    <div class="explain-title-box">
      <div class="explain-icon small-icon"></div>
      <div class="explain-icon middle-icon"></div>
      <div class="explain-icon big-icon"></div>
      <div class="explain-title">案例数据</div>
      <div class="explain-icon big-icon"></div>
      <div class="explain-icon middle-icon"></div>
      <div class="explain-icon small-icon"></div>
    </div>
    <div class="case-main">
      <div class="case-item">
        <div class="case-item-img-box">
          <div class="case-item-img case-item-js">
            <i class="jeicon jeicon-js"></i>
            <span>JS数据源</span>
          </div>
          <div class="item-img-triangle item-img-triangle-js"></div>
        </div>

        <div class="case-item-code">
          <div class="code-note">//数据</div>
          <div>
            <span class="code-variate">const</span>
            <span class="code-symbol">&nbsp;data</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;[</span>
          </div>
          <!-- {'公司':'公司A','季度':'1季度','销售额':'100'},  -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">{</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'公司A'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'季度'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'1季度'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'销售额'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'100'</span>
            <span class="code-symbol">}</span>
            <span class="code-symbol">,</span>
          </div>
          <!-- {'公司':'公司A','季度':'2季度','销售额':'200'}, -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">{</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'公司A'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'季度'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'2季度'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'销售额'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'200'</span>
            <span class="code-symbol">}</span>
            <span class="code-symbol">,</span>
          </div>
          <!--  {'公司':'公司B','季度':'1季度','销售额':'300'},  -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">{</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'公司B'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'季度'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'1季度'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'销售额'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'300'</span>
            <span class="code-symbol">}</span>
            <span class="code-symbol">,</span>
          </div>
          <!-- {'公司':'公司B','季度':'3季度','销售额':'400'}, -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">{</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'公司B'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'季度'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'3季度'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'销售额'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'400'</span>
            <span class="code-symbol">}</span>
            <span class="code-symbol">,</span>
          </div>
          <!-- {'公司':'公司C','季度':'1季度','销售额':'50'},  -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">{</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'公司C'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'季度'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'1季度'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'销售额'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'50'</span>
            <span class="code-symbol">}</span>
            <span class="code-symbol">,</span>
          </div>
          <!-- {'公司':'公司C','季度':'2季度','销售额':'60'},  -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">{</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'公司C'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'季度'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'2季度'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'销售额'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'60'</span>
            <span class="code-symbol">}</span>
            <span class="code-symbol">,</span>
          </div>
          <!-- {'公司':'公司C','季度':'3季度','销售额':'700'},  -->
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">{</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'公司C'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'季度'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'3季度'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'销售额'</span>
            <span class="code-symbol">:</span>
            <span class="code-content">'700'</span>
            <span class="code-symbol">}</span>
            <span class="code-symbol">,</span>
          </div>
          <div>
            <span class="code-symbol">]</span>
          </div>
          <div class="code-note">//字段</div>
          <div>
            <span class="code-variate">const</span>
            <span class="code-symbol">&nbsp;data</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;[</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'季度'</span>
            <span class="code-symbol">,</span>
            <span class="code-content">'销售额'</span>
            <span class="code-symbol">];</span>
          </div>
          <div class="code-note">//参数</div>
          <!-- /**
          * 参数字段类型有: 
          * 文本框:'textfield',单选框:'rgroup',复现框:'cgroup',下拉框:'cbbfield',
          * 树形选择:'treessfield',查询选择:'gridssfield',人员选择:'vueuserfield',
          * 日期:'datefield',日期时间:'datetimefield'
          */ -->
          <div class="code-note">/**</div>
          <div class="code-note">&nbsp;*&nbsp;参数字段类型有:</div>
          <div class="code-note"
            >&nbsp;*&nbsp;文本框:'textfield',单选框:'rgroup',复现框:'cgroup',下拉框:'cbbfield',</div
          >
          <div class="code-note"
            >&nbsp;*&nbsp;树形选择:'treessfield',查询选择:'gridssfield',人员选择:'vueuserfield',</div
          >
          <div class="code-note">&nbsp;*&nbsp;日期:'datefield',日期时间:'datetimefield'</div>
          <div class="code-note">&nbsp;*/</div>
          <div>
            <span class="code-variate">const</span>
            <span class="code-symbol">&nbsp;params</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;[</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">{</span>
            <span class="code-symbol">name:</span>
            <span class="code-content">'公司'</span>
            <span class="code-symbol">,</span>
            <span class="code-symbol">label:</span>
            <span class="code-content">'公司名称'</span>
            <span class="code-symbol">,</span>
            <span class="code-symbol">type:</span>
            <span class="code-content">'textfield'</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span class="code-symbol">]</span>
          </div>
          <div>
            <span class="code-variate">return</span>
            <span class="code-symbol">&nbsp;{fields,data,params};</span>
          </div>
        </div>
      </div>
      <div class="case-item">
        <div class="case-item-img-box">
          <div class="case-item-img case-item-sql">
            <i class="jeicon jeicon-data"></i>
            <span>SQL数据源</span>
          </div>
          <div class="item-img-triangle item-img-triangle-sql"></div>
        </div>

        <!-- SELECT 
    PFCS1_5 AS 公司,
    PFCS1_2 AS 季度,
    PFCS1_4 AS 销售额, 
FROM 
    JE_PFCS_PFCS1 -->
        <div class="case-item-code">
          <div>
            <span class="code-variate">SELECT</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">PFCS1_5</span>
            <span class="code-variate">&nbsp;AS</span>
            <span class="code-symbol">&nbsp;公司,</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">PFCS1_2</span>
            <span class="code-variate">&nbsp;AS</span>
            <span class="code-symbol">&nbsp;季度,</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">PFCS1_4</span>
            <span class="code-variate">&nbsp;AS</span>
            <span class="code-symbol">&nbsp;销售额,</span>
          </div>
          <div>
            <span class="code-variate">FROM</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">JE_PFCS_PFCS1</span>
          </div>
        </div>
      </div>
      <div class="case-item">
        <div class="case-item-img-box">
          <div class="case-item-img case-item-action">
            <i class="jeicon jeicon-process"></i>
            <span>数据接口服务</span>
          </div>
          <div class="item-img-triangle item-img-triangle-action"></div>
        </div>
        <div class="case-item-code" style="margin-bottom: 0">
          <div>
            <span class="code-rewrite">@RpcSchema</span>
            <span class="code-symbol">(schemaId</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-content">&nbsp;"dataSourceRpcService"</span>
            <span class="code-symbol">)</span>
          </div>
          <div>
            <span class="code-variate">public</span>
            <span class="code-variate">&nbsp;class</span>
            <span class="code-symbol">&nbsp;TestActionServiceImpl</span>
            <span class="code-variate">&nbsp;implements</span>
            <span class="code-symbol">&nbsp;DataSourceRpcService</span>
            <span class="code-symbol">&nbsp;{</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-rewrite">@Autowired</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">&nbsp;protected</span>
            <span class="code-symbol">&nbsp;MetaService</span>
            <span class="code-symbol">&nbsp;metaService;</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-rewrite">@Override</span>
            <span class="code-variate">&nbsp;public</span>
            <span class="code-symbol">&nbsp;List{{ leftBracket }}Map{{ leftBracket }}String,</span>
            <span class="code-symbol">&nbsp;Object{{ rightBracket }}{{ rightBracket }}</span>
            <span class="code-symbol">&nbsp;queryData(JSONObject</span>
            <span class="code-symbol">&nbsp;jsonObject)</span>
            <span class="code-symbol">&nbsp;{</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">String</span>
            <span class="code-symbol">&nbsp;strData</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-content"
              >&nbsp;"[{'公司':'公司A','季度':'1季度','销售额':'100'},{'公司':'公司A','季度':'2季度','销售额':'200'},{'公司':'公司B','季度':'1季度','销售额':'300'},{'公司':'公司B','季度':'3季度','销售额':'400'},{'公司':'公司C','季度':'1季度','销售额':'50'},{'公司':'公司C','季度':'2季度','销售额':'60'},{'公司':'公司C','季度':'3季度','销售额':'700'}]"</span
            >
            <span class="code-symbol">&nbsp;;</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">JSONArray</span>
            <span class="code-symbol">&nbsp;jsonArray</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;JSON.parseArray(strData);</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">List{{ leftBracket }}Map{{ leftBracket }}String,</span>
            <span class="code-symbol">&nbsp;Object{{ rightBracket }}{{ rightBracket }}</span>
            <span class="code-symbol">&nbsp;allDataList</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-variate">&nbsp;new</span>
            <span class="code-symbol">&nbsp;ArrayList{{ leftBracket }}{{ rightBracket }}();</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">for</span>
            <span class="code-symbol">(</span>
            <span class="code-variate">int</span>
            <span class="code-symbol">&nbsp;i=0;i{{ leftBracket }}jsonArray.size();i++){</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">JSONObject</span>
            <span class="code-symbol">&nbsp;json</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;jsonArray.getJSONObject(i);</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">allDataList.add(json);</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">String</span>
            <span class="code-symbol">&nbsp;namePra</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-content">&nbsp;""</span>
            <span class="code-symbol">;</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">String</span>
            <span class="code-symbol">&nbsp;limit</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-content">&nbsp;""</span>
            <span class="code-symbol">;</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">if</span>
            <span class="code-symbol">(jsonObject</span>
            <span class="code-symbol">&nbsp;!=</span>
            <span class="code-symbol">&nbsp;null){</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">if</span>
            <span class="code-symbol">(jsonObject.containsKey(</span>
            <span class="code-content">"公司"</span>
            <span class="code-symbol">)){</span>
          </div>
          <div>
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
            >
            <span class="code-symbol">namePra</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;jsonObject.getString(</span>
            <span class="code-content">"公司"</span>
            <span class="code-symbol">);</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>

          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">if</span>
            <span class="code-symbol">(jsonObject.containsKey(</span>
            <span class="code-content">"limit"</span>
            <span class="code-symbol">)){</span>
          </div>
          <div>
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
            >
            <span class="code-symbol">limit</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;jsonObject.getString(</span>
            <span class="code-content">"limit"</span>
            <span class="code-symbol">);</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">if</span>
            <span class="code-symbol">(StringUtil.isEmpty(namePra)</span>
            <span class="code-symbol">&nbsp;&&</span>
            <span class="code-symbol">&nbsp;StringUtil.isEmpty(limit)){</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">return</span>
            <span class="code-symbol">&nbsp;allDataList;</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">if</span>
            <span class="code-symbol">(StringUtil.isNotEmpty(limit)){</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">if</span>
            <span class="code-symbol"
              >(Integer.parseInt(limit)&nbsp;{{ leftBracket }}&nbsp;allDataList.size()){
            </span>
          </div>
          <div>
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
            >
            <span class="code-symbol">allDataList</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;allDataList.subList(0,Integer.parseInt(limit)</span>
            <span class="code-symbol">&nbsp;-</span>
            <span class="code-symbol">&nbsp;1);</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">List{{ leftBracket }}Map{{ leftBracket }}String,</span>
            <span class="code-symbol">&nbsp;Object{{ rightBracket }}{{ rightBracket }}</span>
            <span class="code-symbol">&nbsp;list</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-variate">&nbsp;new</span>
            <span class="code-symbol">&nbsp;ArrayList{{ leftBracket }}{{ rightBracket }}();</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">if</span>
            <span class="code-symbol">(StringUtil.isNotEmpty(namePra)){</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">for</span>
            <span class="code-symbol"
              >(Map{{ leftBracket }}String,Object{{ rightBracket }}&nbsp;map:allDataList){</span
            >
          </div>
          <div>
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
            >
            <span class="code-symbol">String</span>
            <span class="code-symbol">&nbsp;name</span>
            <span class="code-symbol">&nbsp;=</span>
            <span class="code-symbol">&nbsp;(String)</span>
            <span class="code-symbol">&nbsp;map.get(</span>
            <span class="code-content">"公司"</span>
            <span class="code-symbol">);</span>
          </div>
          <div>
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
            >
            <span class="code-variate">if</span>
            <span class="code-symbol">(namePra.equals(name)){</span>
          </div>
          <div>
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
            >
            <span class="code-symbol">list.add(map);</span>
          </div>
          <div>
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
            >
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
            <span class="code-variate">else</span>
            <span class="code-symbol">{</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">list.addAll(allDataList);</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-variate">return</span>
            <span class="code-symbol">&nbsp;list;</span>
          </div>
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="code-symbol">}</span>
          </div>
          <div>
            <span class="code-symbol">}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  export default defineComponent({
    name: 'SourceCase',
    setup() {
      const state = reactive({
        leftBracket: '<',
        rightBracket: '>',
      });
      onMounted(() => {});
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .case-box {
    width: 100%;
  }
  .explain-title-box {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    .explain-icon {
      background: #3f3f3f;
      border-radius: 50%;
    }
    .small-icon {
      width: 4px;
      height: 4px;
      opacity: 0.2;
    }
    .middle-icon {
      width: 7px;
      height: 7px;
      opacity: 0.6;
      margin: 0 4px;
    }
    .big-icon {
      width: 10px;
      height: 10px;
    }
    .explain-title {
      font-size: 18px;
      font-weight: bold;
      color: #3f3f3f;
      padding: 0 10px;
    }
  }
  .case-main {
    width: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px 0 20px;
    .case-item {
      width: 100%;
      padding: 0 20px;
      .case-item-img-box {
        width: 100%;
        height: 40px;
        position: relative;
        margin-left: -30px;
      }
      .case-item-img-box:first {
        margin-top: 0;
      }
      .case-item-img {
        width: 200px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        line-height: 20px;
        font-size: 16px;
        border-radius: 6px 6px 6px 4px;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        span {
          padding-left: 8px;
        }
      }
      .item-img-triangle {
        width: 0;
        height: 0;
        border: 7px solid transparent;
        border-right: none;
        position: absolute;
        left: 4px;
        top: 33px;
        rotate: -45deg;
      }
      .item-img-triangle-js {
        border-left-color: #3265f5;
      }
      .item-img-triangle-sql {
        border-left-color: #fe774b;
      }
      .item-img-triangle-action {
        border-left-color: #fbc754;
      }
      .case-item-js {
        background: linear-gradient(90deg, #6e97ff, #5380ff);
      }
      .case-item-sql {
        background: linear-gradient(90deg, #fca78c, #fe774b);
      }
      .case-item-action {
        background: linear-gradient(90deg, #ffde96, #fbc754);
      }
      .case-item-code {
        width: 100%;
        margin: 0 20px;
        background-color: #f8f8f8;
        padding: 10px 20px;
        font-size: 14px;
        line-height: 20px;
        margin: 10px 0 20px;
        .code-note {
          color: #618b4e;
        }
        .code-variate {
          color: #569dd6;
        }
        .code-symbol {
          color: #999999;
        }
        .code-content {
          color: #cf9178;
        }
        .code-rewrite {
          color: #cd6766;
        }
      }
    }
  }
</style>
